<script lang="ts">
  import Highlight from '$lib/components/Highlight.svelte';
  import type { PageData } from './$types';

  export let data: PageData;
</script>

<h2>Recipes and caveats</h2>

<h3>Custom HTTP headers</h3>

<p>
  The <code>createTRPCClient</code> method optionally accepts a <code>headers</code> option, which
  can be useful, for example, to set an <code>Authorization</code> header.
</p>

<h3>Setting response headers and cookies</h3>

<p>
  To change the headers of the response, you want to use the <code>event</code> provided in
  <code>getContext</code>. You may also pass the <code>event</code> into the context, so that it can
  be accessed in your procedures.
</p>

<p>
  You can then use <code>event.setHeaders</code> and <code>event.cookies</code> to edit the headers.
</p>

<Highlight {...data.codeBlocks['simple/src/lib/trpc/context.ts']} />

<h3>Using custom data transformers</h3>

<p>
  The <code>createTRPCClient</code> method optionally accepts a <code>transformer</code> option.
  Please refer to
  <a href="https://trpc.io/docs/data-transformers" target="_blank" rel="noreferrer"
    >this section in the tRPC.io documentation</a
  >
  for more information, and keep in mind that you'll have to use the same <code>transformer</code> when
  you're defining the router and when you're creating the client.
</p>
<p>
  If you're looking for a convenient transformer based on <a
    href="https://github.com/blitz-js/superjson"
    target="_blank"
    rel="noreferrer">superjson</a
  >
  with
  <a href="https://mikemcl.github.io/decimal.js/" target="_blank" rel="noreferrer">Decimal.js</a>
  support, consider using the
  <a href="https://github.com/icflorescu/trpc-transformer" target="_blank" rel="noreferrer"
    >trpc-transformer</a
  >
  package. Keep in mind that you'll have to install the <code>superjson</code> and
  <code>decimal.js</code> peer dependencies as well.
</p>
<h3>Response caching</h3>

<p>
  Your server responses must <a
    href="https://vercel.com/docs/concepts/functions/serverless-functions/edge-caching"
    target="_blank"
    rel="noreferrer">satisfy some criteria</a
  >
  in order for them to be cached (i.e. by Vercel's Edge Network). Please refer to
  <a href="https://trpc.io/docs/caching" target="_blank" rel="noreferrer"
    >this section of the tRPC.io documentation</a
  > for more information.
</p>
<p>
  The <code>createHTTPHandle</code> method conveniently allows you to specify a
  <code>responseMeta</code> function.
</p>

<h3>Inferring types</h3>

<p>
  It is often useful to wrap functionality of your tRPC client API within other functions. For this
  purpose, it's necessary to be able to infer input types and output types generated by your tRPC
  router. The<code>@trpc/server</code> package exports two helper types to assist with inferring
  these types from your router, namely <code>inferRouterInputs</code> and
  <code>inferRouterOutputs</code>. Please refer to
  <a href="https://trpc.io/docs/infer-types" target="_blank" rel="noreferrer"
    >this section of the tRPC.io documentation</a
  >
  for more information.
</p>

<p>
  To make your code faster to type and easier to read, you could further refine these helper types
  when defining your router:
</p>

<Highlight {...data.codeBlocks['bookstall/src/lib/trpc/router.ts']} />

<p>Then, you could use the helper types in your pages code like so:</p>

<Highlight {...data.codeBlocks['bookstall/src/routes/authors/+page.svelte']} />

<h3>Reserved path prefix</h3>

<p>
  Invoking the <code>createHTTPHandle</code> method reserves the <code>/trpc</code> path prefix for
  the tRPC API. This means that you cannot use this prefix for any other purpose. If you need to use
  this prefix for other purposes, you can use the <code>url</code> option to change the reserved prefix.
</p>
